<template>
    <div class="xjcategorylist">
        <!-- <van-cell>
                <template #title>
                    <span style="font-weight: bold; font-size: 16px">专栏</span>
                </template>
                <template #right-icon>
                       <span @click="clickMoreColumnList()" style="color:black">
                        查看更多
                        <van-icon name="arrow" size="15" /></span>
                </template>
            </van-cell> -->
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh2">
            <van-card
                num="2"
                price="2.00"
                :desc="item4.description"
                :title="item4.title"
                thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
                origin-price="10.00"
                v-for="(item4, index4) in columnlist"
                :key="index4"
                @click="clickColumn(item4)"
            >
                <template #thumb>
                    <van-image width="110" height="90" :src="item4.cover" />
                </template>
                <template #price>
                    <span style="color: red">{{ item4.price == 0 ? '免费' : '￥' + item4.price }}</span>
                </template>
                <template #origin-price>
                    <span>{{ item4.marking_price == 0 ? '' : '￥' + item4.marking_price }}</span>
                </template>
                <template #tag v-if="item4.marking_price!=0">
                  <span style="color:#FFF" v-if="item4.act_name=='seckill'">秒杀</span>
                  <span style="color:#FFF"  v-if="item4.act_name=='limit_discount'">限时折扣</span>
                </template>
                <template #tags>
                    <van-tag plain type="danger" style="margin-right: 3px" v-for="(item5, index5) in item4.tag" :key="index5">{{
                        item5
                    }}</van-tag>
                </template>
                <template #num>
                    <span>{{ item4.view }}次观看</span>
                </template>
            </van-card>
            <div style="margin-bottom: 100px"></div>
        </van-pull-refresh>
    </div>
</template>

<script>
export default {
    props: ['category_id'],
    data() {
        return {
            id: '', //发送子分类id获取cardlist
            columnlist: [], //视频数据列表
            refreshing: false
        };
    },
    methods: {
        onRefresh2() {
            this.getColumnList(this.id);
            this.$toast.success('刷新成功');
        },
        async getColumnList(id) {
            if (this.$route.query.columnid) {
                let query = {
                    id,
                    status: 1,
                    column_id: this.$route.query.columnid,
                    k_id: this.$route.query.id
                };
                //let res = await this.$frontaxios.post(this.$front.getcolumnListData,query);
                let res = await this.$frontaxios.post(this.$front.api_getrandgoodslist, query);
                if (res.code == 1) {
                    this.columnlist = res.data;
                    for (let i = 0; i < this.columnlist.length; i++) {
                        if (this.columnlist[i].tag) {
                            this.columnlist[i].tag = this.columnlist[i].tag.split(',');
                        }
                    }
                } else {
                    console.log('获取专栏数据列表失败');
                }
            } else {
                let query = {
                    id,
                    status: 1,
                    column_id: this.$route.query.id
                };
                //let res = await this.$frontaxios.post(this.$front.getcolumnListData,query);
                let res = await this.$frontaxios.post(this.$front.api_getrandgoodslist, query);
                if (res.code == 1) {
                    this.columnlist = res.data;
                    for (let i = 0; i < this.columnlist.length; i++) {
                        if (this.columnlist[i].tag) {
                            this.columnlist[i].tag = this.columnlist[i].tag.split(',');
                        }
                    }
                } else {
                    console.log('获取专栏数据列表失败');
                }
            }
        },
        clickColumn(item) {
            console.log(item);
            if (item.type == 'column') {
                console.log(111111);
                this.$router.push({
                    name: 'product',
                    query: {
                        id: item.id
                    }
                });
            } else if (item.type == 'video') {
                this.$router.push({ name: 'videocontent', query: { id: item.id, columnid: this.$route.query.id } });
            } else if (item.type == 'audio') {
                this.$router.push({ name: 'audiocontent', query: { id: item.id, columnid: this.$route.query.id } });
            } else if (item.type == 'image_text') {
                this.$router.push({ name: 'image_textcontent', query: { id: item.id, columnid: this.$route.query.id } });
            }
        },
        clickMoreColumnList(id) {
            this.$router.push({ name: 'morecolumnlist', query: { id: this.category_id } });
        }
    },
    created() {
        this.getColumnList(this.category_id); //得到专栏列表数据
    }
};
</script>

<style lang="scss" scoped>
.xjcategorylist {
    .van-card__content {
        margin-left: 20px;
    }

    .van-cell {
        align-items: center;
        border: 1px solid #eee;
        height: 40px;
    }
}

.child-item {
    margin-top: 10px;
    text-align: center;

    .vancol {
        margin-bottom: 8px;

        .defaulttagcolor {
            color: #87929b;
        }

        .selecttagcolor {
            color: #168dfa;
        }
    }
}
.van-card__tag {
    left: -18px;
    top: 14px;
    width: 84px;
    background-color: red;
    transform: rotate(-45deg);
    text-align: center;
}
.van-card__thumb{
    overflow: hidden;
}
</style>
